<template>
	<div class="content">
		<div class="tar m-b10">
			<Button type="primary" @click="add">添加</Button>
		</div>
		<Table ref="selection" :columns="columns4" :data="list"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="changepage"></Page>
		<!-- 添加公告 -->
		<Modal v-model="modal1" title="添加公告" :mask-closable="false" width="1200">
			<Form :label-width="100" :model="addForm" ref="addUserForm">
				<FormItem label="名称" prop="title">
					<Input v-model="addForm.title" placeholder="请输入公告名称" />
				</FormItem>
				<FormItem label="内容" prop="content">
					<quill-editor v-model="addForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="addForm.content='';addForm.title = '';modal1 = false">取消</Button>
				<Button type="primary" size="large" @click="addgg">确定</Button>
			</div>
		</Modal>
		<!-- 修改公告 -->
		<Modal v-model="modal3" title="修改公告" :mask-closable="false" width="1200">
			<Form :label-width="100" :model="editForm" ref="addUserForm">
				<FormItem label="公告名称" prop="title">
					<Input v-model="editForm.title" placeholder="请输入公告名称" />
				</FormItem>
				<FormItem label="内容" prop="content">
					<quill-editor v-model="editForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="editForm.content='';editForm.title = '';modal3 = false">取消</Button>
				<Button type="primary" size="large" @click="emitgg">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal4" title="查看公告" :footer-hide="true" width="1200" class="modal4">
			<Form :label-width="100" :model="editForm" ref="addUserForm">
				<FormItem label="公告名称" prop="title">
					<span v-text="editForm.title"></span>
				</FormItem>
				<FormItem label="发布时间">
					<span v-text="editForm.createTime"></span>
				</FormItem>
				<FormItem label="内容" prop="content">
					<div v-html="seeContent"></div>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: "bearer " + localStorage.getItem("mytoken")
				},
				list: [],
				id: "",
				ntid: "",
				falg: false,
				imgUrl: "", // 上传图片地址
				srcimg: "",
				// // 分页
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				editorOption: {},
				seeContent: "",
				rules: {
					title: [{
						required: true,
						message: "请输入公告名称",
						trigger: "blur"
					}],
					content: [{
						required: true,
						message: "请输入内容",
						trigger: "blur"
					}]
				},
				rules1: {
					title: [{
						required: true,
						message: "请输入公告名称",
						trigger: "blur"
					}],
					content: [{
						required: true,
						message: "请输入内容",
						trigger: "blur"
					}]
				},
				modal1: false,
				modal2: false,
				modal3: false,
				modal4: false,
				addForm: {
					languageId: "",
					title: "",
					content: ""
				},
				editForm: {
					id: "",
					title: "",
					content: ""
				},
				index: "",
				columns4: [{
						title: "名称",
						key: "title"
					},
//					{
//						title: '缩略图',
//						key: 'thumbnail',
//						render: (h, params) => {
//							return h('div', [
//								h('img', {
//									attrs: {
//										src: this.list[params.index].thumbnail,
//										preview: '1'
//									},
//									style: {
//										width: '70px',
//										height: '70px',
//										margin: '10px 0'
//									}
//								})
//							])
//						}
//					},
					{
						title: "发布时间",
						key: "createTime",
						sortable: true
					},
					{
						title: "操作",
						key: "action",
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.modal3 = true;
												this.editForm.id = params.row.id;
												this.emit(this.list[params.index].id);
											}
										}
									},
									"修改"
								),
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.modal4 = true;
												this.emit(this.list[params.index].id);
											}
										}
									},
									"查看"
								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small"
										},
										on: {
											click: () => {
												let $this = this;
												this.$Modal.confirm({
													title: "删除公告",
													content: "是否要删除公告？",
													onOk: function() {
														$this.remove($this.list[params.index].id);
													}
												});
											}
										}
									},
									"删除"
								)
							]);
						}
					}
				]
			};
		},
		methods: {
			// 添加公告
			add() {
				this.modal1 = true;
			},
			addgg() {
				if(!this.addForm.title) {
					this.$Message.info("公告名称不能为空");
					return false;
				}

				if(!this.addForm.content) {
					this.$Message.info("公告内容不能为空");
					return false;
				}

				let params = this.qs.stringify({
					title: this.addForm.title,
					content: this.addForm.content
				});
				this.axios.post("/admin/operating/notices", params).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
						this.addForm.title = null;
						this.addForm.content = null;
						this.modal1 = false;
					}
				});
			},
			// 修改公告
			emit(id) {
				this.ntid = id;
				this.axios.get("/admin/operating/notices/" + id).then(res => {
					if(res.data.code == 200) {
						this.editForm.languageId = res.data.data.languageId;
						this.editForm.title = res.data.data.title;
						this.editForm.createTime = this.stringToTime(
							res.data.data.createTime
						);
						this.seeContent = res.data.data.content;
						this.editForm.content = res.data.data.content;
					}
				});
			},
			emitgg() {
				if(!this.editForm.title) {
					this.$Message.info("标题不能为空");
					return false;
				}
				if(!this.editForm.content) {
					this.$Message.info("内容不能为空");
					return false;
				}
				this.axios
					.put(
						"/admin/operating/notices?id=" +
						this.editForm.id +
						"&title=" +
						this.editForm.title +
						"&content=" +
						this.editForm.content +
						"", {}
					)
					.then(res => {
						if(res.data.code == 200) {
							this.$Message.info(res.data.msg);
							this.getList();
							this.modal3 = false;
						}
					});
			},
			// 删除公告
			remove(id) {
				this.axios.delete("/admin/operating/notices/" + id).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
					}
				});
			},
			// 获取所有公告
			getList() {
				this.axios
					.get(
						"/admin/operating/notices?current=" +
						this.page +
						"&size=" +
						this.pageSize
					)
					.then(res => {
						if(res.data.code == 200) {
							this.list = res.data.data.records;
							this.list.forEach((row, i) => {
								this.list[i].createTime = this.stringToTime(
									this.list[i].createTime
								);
							});
							this.info = res.data.data.total;
						}
					});
			},
			// 分页
			changepage(page) {
				this.page = page;
				this.axios
					.get(
						"/admin/operating/notices?current=" + page + "&size=" + this.pageSize
					)
					.then(res => {
						if(res.data.code == 200) {
							this.list = res.data.data.records;
						}
					});
			},
			// 富文本编辑器
			onEditorBlur() {
				// 失去焦点事件
			},
			onEditorFocus() {
				// 获得焦点事件
			},
			onEditorChange() {
				// 内容改变事件
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				this.$Message.info(res.msg);
				this.imgUrl = res.data;
			}
		},
		created() {
			this.getList();
		},
		mounted() {
			this.$Message.config({
				top: 250
			});
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ql-editor {
		min-height: 260px;
	}
	
	/deep/.ivu-form-item {
		margin-bottom: 10px;
	}
</style>